<template>
    <view class="page-community-index">
        <view class="search-bar flex-between">
            <view class="mr-2 city" @click="proxy.$util.gotoPage('/packageA/city/list?type=community')">
                <u-image width="32rpx" height="32rpx" :src="proxy.$icon.site"></u-image>
                <text class="ml-1">{{ communityCity.name }}</text>
            </view>
            <view class="flex-1">
                <view class="input" @click="proxy.$util.gotoPage('/packageB/creation/search')">
                    <text>请输入关键字搜索</text>
                    <u-image width="40rpx" height="40rpx" :src="proxy.$icon.search"></u-image>
                </view>
            </view>
        </view>
        <view class="menu">
            <u-row gutter="30">
                <u-col span="6" v-for="(item, index) in menu" :key="index" @click="gotoPage(item)">
                    <u-image :src="item.image" width="100%" height="270rpx" />
                </u-col>
            </u-row>
        </view>
        <view class="p-4" v-if="longList.list.length == 0">
            <u-empty text="暂无内容" mode="list"></u-empty>
        </view>
        <view class="album">
            <view class="item" v-for="(item, index) in longList.list" :key="index">
                <view class="avatar" @click="proxy.$util.gotoPage('/packageB/bolg/index', { userId: item.userId })">
                    <u-image width="84rpx" height="84rpx" :src="item.appUserListVo.avatar ? proxy.$util.getFullImage(item.appUserListVo.avatar) : proxy.$icon.avatar"
                        shape="circle"></u-image>
                </view>
                <view class="content">
                    <view class="name" @click="proxy.$util.gotoPage('/packageB/bolg/index', { userId: item.userId })">{{
                item.appUserListVo.nickname || item.appUserListVo.username}}</view>
                    <view class="title" v-if="item.title" @click="proxy.$util.gotoPage('/packageB/creation/detail', { id: item.id })">{{ item.title }}</view>
                    <view v-if="item.articlesType == '2'" class="book" @click="proxy.$util.gotoPage('/packageB/creation/detail', { id: item.id })">
                        <view class="flex-block mb-2">
                            <u-image width="240rpx" height="280rpx" :src="proxy.$util.getFullImage(item.coverImageUrl)"></u-image>
                            <view class="ul-li">
                                <view class="li">书名：{{ item.bookName }}</view>
                                <view class="li">作者：{{ item.bookAuthor }}</view>
                                <view class="li">标签：{{ item.tags }}</view>
                                <view class="li">推荐理由：{{ item.recommendationReason }}</view>
                                <!-- <view class="li" v-for="(tag,i) in item.tagList" :key="i">{{ tag }}</view> -->
                            </view>
                        </view>
                        <view class="text">
                            <view v-html="proxy.$util.resetHtml(item.content)"></view>
                        </view>
                    </view>
                    <view v-else class="text" @click="proxy.$util.gotoPage('/packageB/creation/detail', { id: item.id })">
                        <view v-html="proxy.$util.resetHtml(item.content)"></view>
                    </view>
                    <template v-if="item.articlesType == '1'">
                        <view class="imgs" @click="proxy.$util.gotoPage('/packageB/creation/detail', { id: item.id })">
                            <image-layout ref="refImageLayout" :imgs="articleStore.getImageList(item.coverImageUrl)" />
                        </view>                       
                        <view @click="proxy.$util.gotoPage('/packageB/activity/detail', { id: item.articlesActivitesDto.id })">
                            <u-tag class="activity-tag"
                                :class="articleStore.getActivitiesName(item.articlesActivitesDto, 'isExpire') ? 'tag-grey' : 'tag-cyan'"
                                shape="circle" :text="articleStore.getActivitiesName(item.articlesActivitesDto, 'name')"></u-tag>
                        </view>
                    </template>
                    <view class="comment">
                        <view class="time">{{ item.createTime }}</view>
                        <view class="btns">
                            <view class="btn-item" @click.stop="handleLike(item)"><u-image
                                    :src="item.yesNoLikes ? proxy.$icon.likePre : proxy.$icon.likeDef" width="42rpx"
                                    height="42rpx"></u-image><text class="ml-1">{{ item.likesSum }}</text></view>
                            <view class="btn-item" @click.stop="handleFavorite(item)"><u-image
                                    :src="item.yesNoFavorites ? proxy.$icon.collectPre : proxy.$icon.collectDef"
                                    width="42rpx" height="42rpx"></u-image><text class="ml-1">{{ item.favoritesSum
                                    }}</text></view>
                            <view class="btn-item"
                                @click="proxy.$util.gotoPage('/packageB/creation/detail', { id: item.id })"><u-image
                                    :src="proxy.$icon.talk" width="42rpx" height="42rpx"></u-image><text class="ml-1">{{
                                    item.commentsSum }}</text></view>
                        <!-- <view class="btn-item"><u-image :src="proxy.$icon.share" width="42rpx" height="42rpx"></u-image><text class="ml-1">999</text></view> -->
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <fixed-btn ref="refFixedBtn" v-if="isLogin" />
        <fly-tabbar ref="refFlyTabbar" current="community" />
    </view>
</template>
<script setup lang="ts">
import {communityList} from '@/static/js/staticData';
import ImageLayout from '@/components/ImageLayout/index.vue';
import FlyTabbar from '@/components/FlyTabbar/index.vue'
const refFlyTabbar = ref();
import FixedBtn from './components/fixedBtn.vue'
import { useLonglist } from '@/static/fn/longList';
const initObj = {
    listApi: '/admin/articles/page?status=1&isYesNoHome=1',
}
let { searchForm, longList, getList } = useLonglist(initObj);
import { onShow, onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { useAppStore } from '@/stores/app';
const appStore = useAppStore();
import { useArticleStore } from '@/stores/article';
const articleStore = useArticleStore();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const refFixedBtn = ref();
let isLogin = ref(false);
let communityCity = reactive({
    code: '',
    name: '',
})
const menu = reactive([
    { name: '建立分会', image: proxy.$icon.establishbranchBtn, url: '/packageA/branch/add' },
    { name: '历史活动', image: proxy.$icon.historicalactivities, url: '/packageB/activity/history' },
]);
const handleLike = (item, index) => {
    if (item.yesNoLikes) {
        articleStore.deleteLike(item.id).then(res => {
            item.yesNoLikes = false;
            item.likesSum = Number(item.likesSum) - 1;
        });
    } else {
        let params = {
            articleId: item.id,
            userId: appStore.userInfo.userId,
        }
        articleStore.handleLike(params).then(res => {
            item.yesNoLikes = true;
            item.likesSum = Number(item.likesSum) + 1;
        });
    }
};
const handleFavorite = (item, index) => {
    if (item.yesNoFavorites) {
        articleStore.deleteFavorite(item.id).then(res => {
            // getList('refresh');
            item.yesNoFavorites = false;
            item.favoritesSum = Number(item.favoritesSum) - 1;
        });
    } else {
        let params = {
            articleId: item.id,
            userId: appStore.userInfo.userId,
        }
        articleStore.handleFavorite(params).then(res => {
            item.yesNoFavorites = true;
            item.favoritesSum = Number(item.favoritesSum) + 1;
        });
    }
};
const getCommunityCity = () => {
    communityCity = appStore.communityCity;
    console.log(communityCity);
    searchForm.abcode = communityCity.code;
    if(proxy.$util.checkLogin('nologin')){
        isLogin.value = appStore.versionStatus;//true;
        getList('refresh');    
    }else{
        // longList.list = communityList;
        isLogin.value = false;
    }
};
const gotoPage = (item) => {
    if(item.name == '历史活动'){
        proxy.$util.gotoPage(item.url);
    }else{
        appStore.getUserRole().then(res => {
            let isMember = res.indexOf(3) != -1;
            if(isMember){
                proxy.$util.gotoPage(item.url);
            }else{
                proxy.$util.gotoPage('/packageA/branch/list');
            }
        });
    }
}
onPullDownRefresh(() => {
    getList('refresh')
    setTimeout(() => {
        uni.stopPullDownRefresh();
    }, 1000);
});
onReachBottom(() => {
    getList()
});
onShow(() => {
    getCommunityCity();
});
</script>
<style lang="scss">
page {
    background: #fff;
}
</style>